<template>
	<view>
		<!-- 搜索列表 -->
		<block v-for="(item, index) in dataList" :key="index">
			<next-swipe-action :btnGroup="swipeOptions" :index="index" @btnClick="handleSwipe">
				<tn-checkbox-group>
					<view class="cl-box" @click="details(item,index)">
						<!-- @change="checkboxGroupChange" -->
						<tn-checkbox :name="index" shape="circle" v-model="item.checked" v-if="edit"></tn-checkbox>
						<view class="cl-img" style="position: relative;">
							<image class="cl-img" mode="aspectFill" :src="item.coverImage"></image>
							<view class="type-icon">{{item.type=='0'?'微课堂':'直播回看'}}</view>
						</view>
						<view class="cl-info">
							<view class="cl-title">{{item.title}}</view>
							<view class="cl-author" v-if="item.type=='0'">
								<image class="author-img" :src="item.avatar"></image>
								<view class="author-info">
									<view class="author-name">{{item.authorName}}</view>
									<view class="author-hosp">{{item.orgName}}</view>
								</view>
							</view>
							<view class="cl-author" v-if="item.type=='1'">
								<block v-for="(o, i) in item.expertVOList" :key="i">
									<image class="author-img" :src="o.avatar" v-if="o.avatar"></image>
									<view class="author-info">
										<view class="author-name">{{item.name||''}}</view>
										<view class="author-hosp">{{item.orgName||''}}</view>
									</view>
								</block>
							</view>
						</view>
					</view>
				</tn-checkbox-group>
			</next-swipe-action>
		</block>
	</view>

</template>

<script>
	import {
		batchDelete
	} from '@/util/index.js'
	export default {
		name: "collect-list",
		//属性
		props: {
			dataList: {
				type: Array,
				default: []
			},
			// 滑动菜单
			swipeOptions: {
				type: Array,
				default: []
			},
			edit: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			// dataList: {
			// 	handler(value) {
			// 		if (value) {
			// 			value.forEach((item) => {
			// 				item.checked = false
			// 			})
			// 		} else {
			// 			this.inputCarNumber = false
			// 		}
			// 	},
			// 	immediate: true
			// }
		},
		data() {
			return {
				content: '',
			};
		},
		created() {},
		methods: {
			details(v, i) {
				if (this.edit) {
					this.dataList[i].checked = !v.checked
					this.$emit('refreshContent', this.dataList)
					return
				}
				let url;
				if (v.type == '0') {
					switch (v.contentType) { //0:图文,1视频,2:轮播图
						case '0':
							url = `../../articleVideo/Ti-details/Ti-details?id=${v.id}`
							break;
						case '1':
							url = `../../articleVideo/video-details/video-details?id=${v.id}`
							break;
						default:
							url = `../../articleVideo/swiper-details/swiper-details?id=${v.id}`
							break;
					}
				} else {
					url = `../../articleVideo/live-video/live-video?id=${v.id}&liveStatus=${v.liveStatus}`
				}
				uni.navigateTo({
					url: url
				})
			},
			handleSwipe(e) {
				batchDelete({
					contentsVOList: [{
						id: this.dataList[e.index].id,
						type: this.dataList[e.index].type
					}],
					valiFlag: '0'
				}).then((res) => {
					this.$emit('refreshContent')
				})
			},
			checkboxGroupChange(e) {
				this.dataList[e.name].checked = e.value
			},
		}

	}
</script>

<style lang="less">
	.cl-box {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #eeeeee;

		// align-items: center;
		.cl-img {
			width: 250rpx;
			height: 200rpx;
			display: block;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			// image {
			// 	width: 100%;
			// 	height: 100%;
			// }
		}

		.type-icon {
			position: absolute;
			top: 10rpx;
			left: 10rpx;
			padding: 0 10rpx;
			height: 35rpx;
			line-height: 35rpx;
			background-color: #00bd42;
			color: #ffffff;
			font-size: 22rpx;
			border-radius: 10rpx;
		}

		.cl-info {
			// flex: 1;
			width: 460rpx;
			padding-left: 20rpx;

			.cl-title {
				font-size: 30rpx;
				font-weight: 500;
				// text-overflow: ellipsis;
				overflow: hidden;
				// white-space: nowrap;
				width: 400rpx;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				line-height: 1.2;
				height: 2.4em;
				display: -webkit-box;
			}

			.cl-author {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.author-img {
					width: 85rpx;
					height: 85rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.author-info {
					width: 300rpx;

					view {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						width: 300rpx;
						line-height: 38rpx;
					}

					.author-hosp {
						color: #9b9b9b;
						font-size: 25rpx;
					}
				}
			}
		}
	}
</style>
